.container {
    flex-direction: column;
    width: 100%;
/*    align-items: center;*/
}

.main {
    display: flex;
}

.title {
    width: 100%;
    height: 80px;
/*    height: 160px;*/
/*    height: 20%;*/
    font-size: 22px;
    background-color: #9FC1D5;
    text-align: center;
}

.function {
/*    width: 350px;*/
    width: 100%;
    height: 120px;
    background-color: aliceblue;
    justify-content: space-around;
    margin: 10px 5px 20px 5px;
}

.div1,.div2,.div3 {
    flex-direction: column;
    height: 120px;
    align-content: center;
    width: 80px;
    justify-content: center;
}

.img1,.img2,.img3 {
    width: 40px;
    height: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.text1,.text2,.text3 {
    font-size: 14px;
    text-align: center;
}

.data_div {
/*    width: 350px;*/
    width: 100%;
    background-color: aliceblue;
    margin: 0px 5px 20px 5px;
    flex-direction: column;
}

.data_my {
    font-size: 20px;
    margin-bottom: 5px;
}

/*.data_image{*/
/*    width: 215px;*/
/*    height: 152px;*/
/*    margin-left: 118px;*/
/*    margin-bottom: 5px;*/
/*}*/

.image_div {
    width: 100%;
}

.image_btn {
    position: absolute;
    width: 18%;
    height: 3.5%;
    margin-left: 81%;
}

.pie_legend {
/*    width: 60%;*/
/*    height: 40%;*/
    width: 30%;
    object-fit: contain;
    margin-bottom: 100px;
    position: absolute;
    margin-left: 14%;
    margin-top: 10px;
}

.pie_div{
/*    width: 215px;*/
    width: 60%;
    height: 152px;
/*    margin-left: 118px;*/
    margin-left: 35%;
    margin-bottom: 5px;
    justify-content: center;
    align-items: center;
}

/*.data_pie {*/
/*    stroke-width: 24px;*/
/*}*/

.progress_pie {
    color: #00ff00;
    secondary-color: #ff0000;
    stroke-width: 24px;
}

.pie_text {
    position: absolute;
/*    top: 39%;*/
/*    left: 37%;*/
/*    width: 215px;*/
    width: 100%;
    height: 152px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}

.info_today {
    font-size: 18px;
    margin-left: 5px;
    margin-bottom: 5px;
    font-weight: bold;
}

.info_div {
    width: 100%;
    background-color: aliceblue;
    flex-direction: column;
    align-items: center;
}

.info_div1,.info_div2 {
    width: 97.22222%;
    height: 75px;
    flex-direction: row;
    align-items: center;
}

.info_bar {
    height: 1px;
    width: 320px;
    background-color: #86AAA8A8;
    margin: 0px 20px 0px 20px;
}

.info_image1,.info_image2 {
    width: 35px;
    height: 35px;
    margin-right: 5px;
}

.info_text1,.info_text3 {
    font-size: 20px;
    margin-right: 5px;
/*    margin-right: 15px;*/
}

.info_text2 {
    font-size: 14px;
    margin-left: 100px;
/*    margin-left: 300px;*/
    color: #504E4E;
}

.info_text4 {
    width: 60px;
    height: 29px;
    font-size: 14px;
    margin-left: 5px;
    border: 1.5px solid #1296db;
    border-radius: 2px;
    color: #1296db;
    margin-left: 52px;
/*    margin-left: 156px;*/
    text-align: center;
/*    padding: 1px 4px 1px 4px;*/
}
